import React from 'react';
import { Alert, Card, Empty, message, Skeleton } from 'antd';
import { useRequest } from '@/hooks';
import { fetchEntryRecordList } from '@/pages/EntryManage/services';
import PropTypes from 'prop-types';
import moment from 'moment';
import { ENTRY_STATUS_MAP } from '@/pages/EntryManage/utils';
import styles from '../index.less';

/**
 * 入职详情 - 入职记录
 */
const EntryRecordTabContent = ({ employeeCode }) => {
    // 获取数据
    const {
        data: recordData,
        error: recordDataError
        // loading: fetchRecordDataLoading,
    } = useRequest(() => fetchEntryRecordList(employeeCode), {
        cacheKey: `entry-record-${employeeCode}`,
        refreshDeps: [employeeCode],
        formatResult: res => {
            if (res) {
                const { code, data, msg } = res;
                if (code === 10000) {
                    if (data instanceof Array && data.length) {
                        return data.reverse();
                    }
                    return [];
                }
                message.error(msg);
            }
            return undefined;
        }
    });

    // 错误处理
    if (recordDataError) {
        return <Alert type="error" message={recordDataError} />;
    }

    // render
    return (
        <Skeleton loading={!recordData}>
            {recordData && recordData.length > 0 ? (
                recordData.map(item => (
                    <Card
                        className={styles.recordItem}
                        title={`${ENTRY_STATUS_MAP[Math.abs(item.operationType)]?.tipText ||
                            ENTRY_STATUS_MAP[Math.abs(item.operationType)]?.name} ${
                            item.operationType < 0 ? '（退回）' : ''
                        }`}
                        key={item.id}
                        style={{ width: '70%' }}
                    >
                        <div className={styles.recordItemRow}>
                            <span className={styles.recordItemLabel}>确认人：</span>
                            <span className={styles.recordItemValue}>{item.currentHandlerEmployeeName}</span>
                        </div>
                        <div className={styles.recordItemRow}>
                            <span className={styles.recordItemLabel}>确认时间：</span>
                            <span className={styles.recordItemValue}>
                                {moment(item.updateTime).format('YYYY-MM-DD HH:mm')}
                            </span>
                        </div>
                        {item?.reason && item?.reason !== '' && (
                            <div className={styles.recordItemRow}>
                                <span className={styles.recordItemLabel}>备注：</span>
                                <span className={styles.recordItemValue}>{item?.reason}</span>
                            </div>
                        )}

                        <div className={styles.recordItemStatus}>已确认</div>
                    </Card>
                ))
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </Skeleton>
    );
};

// prop
EntryRecordTabContent.propTypes = {
    employeeCode: PropTypes.string.isRequired
};

EntryRecordTabContent.defaultProps = {};

export default EntryRecordTabContent;
